<script setup lang="ts">
import { getSubjectList } from '@/api/subject';
import { Subject } from '@/api/subject/type';
import AllSubject from '@/components/icons/subject/AllSubject.vue';
import { router } from '@/router';
import { onMounted, ref } from 'vue';

const subjectList = ref([] as Subject[]);
onMounted(() => {
    refresh();
})

const refresh = () => {
    getSubjectList().then((res) => {
        subjectList.value = res.data;
    })
}

const toHome = (id: string) => {
    router.push({
        name: "SubjectHome",
        query: {
            "id": id
        }
    });
}
</script>

<template>
    <div class="subjectList">
        <div class="header-row">
            <div class="my">
                <AllSubject></AllSubject>
                <div class="text">
                    <p>所有题目集</p>
                </div>
            </div>
        </div>
        <div class="content">
            <div v-for="(item, index) in subjectList" 
                class="item" 
                :key="index" 
                @click="toHome(item.id)"
            >
                <div class="avatar">
                    <van-image :src="item.avatar" width="60px" height="60px" radius="4px" fit="cover"></van-image>
                </div>
                <div class="info">
                    <div class="name">{{ item.name }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.subjectList {
    display: flex;
    flex-direction: column;
    background-color: white;
    margin-top: 3%;
    border-radius: 15px;
    .header-row {
        padding: 3%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px rgba(0, 0, 0, 0.1) solid;
        .my {
            display: flex;
            align-items: center;
        }
    }
    .content {
        display: flex;
        flex-direction: column;
        .item {
            padding: 3%;
            display: flex;
            align-items: center;
            border-bottom: 1px rgba(0, 0, 0, 0.1) solid;
            .info {
                margin-left: 3%;
            }
        }
    }
}
</style>